<template>
	<view class="bg-drak" :class="[empty ? '' : 'padding-tb']">
		<!-- 空白页 -->
		<use-empty v-if="empty" e-style="round" tip="无渠道数据"></use-empty>

		<view v-else class="padding-lr" v-for="(item, index) in datas" :key="index">
			<view class="product border-radius padding margin-bottom-sm bg-main" style="padding-bottom: 15rpx;">
				<view class="margin-left-sm ">
					<text class="clamp-2">{{ item.title}}</text>
					<text class="price ">{{ item.price }}</text>
				</view>
				<view class="goods-area margin-top" v-for="(item, index) in item.goods" :key="index">
					<image :src="item.img" mode="aspectFill"></image>
					<view class="right flex1">
						<text class="clamp-2">{{ item.name }}</text>
						<view class="ft-dark fs-xs padding-top-xs">
							<text class="margin-right-sm">数量:{{item.stock_num}}</text>
							{{ item.goods_sku_name || '&nbsp;&nbsp;' }}
						</view>
					</view>
				</view>
				<view class="dflex-c padding-tb-sm flex1 bg-base use-hover margin-top" @click="tobuy(item._id)">立即购买
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="modalName=='Modal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">渠道合作协议</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<use-list-title title="渠道合作伙伴合作协议" iconfont=" " @goto="toAgreement('hezuo')"></use-list-title>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="agree">已阅读并同意</button>

					</view>
				</view>
			</view>
		</view>

		<!-- 上拉加载更多 -->
		<use-loadmore v-if="!empty && hasmore" :type="loadmoreType"></use-loadmore>
		<!-- 置顶 -->
		<use-totop ref="usetop" bottom="150"></use-totop>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';

	export default {
		computed: {
			...mapState(['member'])
		},
		data() {
			return {
				modalName: '',
				// 加载更多状态
				loadmoreType: 'nomore',
				// 数据源
				datas: [],
				empty: false,
				hasmore: 0,
				reqdata: {
					rows: 20,
					page: 1
				},
				scrollTop: 0,
				conbo_buy: 0,
				_id: ""
			};
		},
		watch: {
			datas(e) {
				let empty = e.length === 0;
				if (this.empty !== empty) {
					this.empty = empty;
				}
			}
		},
		onLoad: function() {
			this.conbo_buy = this.member.conbo_buy
			this.loadData();
		},
		onPageScroll(e) {
			this.$refs.usetop.change(e.scrollTop);
		},
		methods: {
			loadData() {
				this.$func.wmzmall.call('combo/list').then(res => {
					if (res.code == 200) {
						this.datas = res.datas.data
					}
				});
			},

			tobuy(id) {
				if (!this.conbo_buy) {
					this._id = id
					this.$db['wmzmall-sys-agreement'].noshopid().tolist().then(res => {
						if (res.code == 200) {
							if (res.datas && res.datas.length > 0) {
								let hezuo = res.datas.find(x => x.name == '合作协议');
								uni.setStorage({
									key: '__hezuo',
									data: hezuo
								})
								this.modalName = 'Modal'
							}
						}
					});

					return
				}
				uni.navigateTo({
					url: '/sub-goods/pages/combo/create?id=' + id
				})
			},
			agree() {
				this.conbo_buy = 1
				this.tobuy(this._id)
			},
			hideModal(e) {
				this.modalName = null
				this._id = ""
				this.conbo_buy = 0
			},
			toAgreement(type) {
				uni.getStorage({
					key: '__' + type,
					success: (res) => {
						this.toContent(res.data);
					}
				})
			},
			toContent(item) {
				const content =
					`<div class="__rich_text">${item.content.replace(/<h1/gi, '<h1 class="use-p"').replace(/<h3/gi, '<h3 class="use-p"').replace(/<p/gi, '<p class="use-p"')}</div>`;

				uni.setStorage({
					key: '__rich_text',
					data: content,
					success() {
						uni.navigateTo({
							url: '/pages/content/rich-text'
						})
					}
				})
			},
		},
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
	}

	/* 订单商品明细区 */
	.goods-area {
		display: flex;

		image {
			width: 100rpx;
			height: 100rpx;
		}

		.right {
			padding: 0 0 0 24rpx;
			overflow: hidden;

			.attr-box {
				font-size: $font-sm + 2upx;
				color: $font-color-light;
				padding: 10upx 12upx;
			}
		}
	}
</style>